<style>
    body{
        background-color: cornsilk;
        color: dodgerblue;
        font-family: 'Noto Sans SC', sans-serif;
        width: 680px;
        padding: 2rem;
        font-size: 0;
    }
    h2{
        text-align: center;
        font-size: 24px;
    }
    h3{
        text-align: center;
        font-size: 20px;
        margin-bottom: 0.25rem;
    }
    h4{
        text-align: center;
        font-size: 18px;
        margin-top: 0.2rem;
        margin-bottom: 0.15rem;
    }
    h5{
        font-size: 16px;
        margin-top: 0rem;
        margin-bottom: 0.15rem;
    }
    span.b{
        font-weight: bold;
    }
    p.tips{
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
        text-align: left;
        font-size: 16px;
    }
    skill-card{
        text-align: left;
        white-space: nowrap;
        background-color: #eee7cb;
        margin: 0.1rem 0.1rem;
        padding: 0.4rem;
        width: 10.5rem;
        display: inline-block;
        height: 3rem;
        font-size: 16px;
    }
    skill-card > div:first-of-type{
        line-height: 3rem;
        height: 3rem;
        width: 3rem;
        display: inline-block;
    }
    skill-card > div:last-of-type{
        padding-top: 0.2rem;
        vertical-align:top;
        padding-left: 1rem;
        display: inline-block;
    }
    skill-card > div:last-of-type p.skill-name{
        margin: 0 ;
    }
    skill-card > div:last-of-type p.skill-times{
        color: deepskyblue;
        font-size: 12px;
        margin: 0;
        margin-right: 1rem;
        display: inline-block;
    }
    skill-card img{
        border-radius: 3rem;
        height: 3rem;
        width: 3rem;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    data-card{
        display: inline-block;
        background-color: #eee7cb;
        display: inline-block;
        height: 5rem;
        width: 5rem;
        font-size: 16px;
        padding: 0.1rem;
        margin: 0.1rem;
    } 
    data-card p:nth-of-type(1){
        margin: 0;
    }
    data-card p:nth-of-type(2){
        text-align: center;
        margin: 0;
    }
    data-card p:nth-of-type(3){
        text-align: center;
        color: deepskyblue;
        margin: 0;
        font-size: 14px;
    }
    div.skill-list{
        padding: 0 3.8rem;
    }
    div.data-list{
        padding: 0 2.3rem;
    }
    p.xf{
        font-size: 14px;
    }
</style>
<div id="template">
    <h2>咕Bot - JJC刑场</h2>
    <h3>查询玩家：{{ data.player }}</h3>
    <div>
        <% for(let mode in data.performance) { %>
            <% let key = mode.substr(0,1) + mode.substr(0,1) %>
            <h4>{{key}}</h4>
            <% if(data.performance[mode].performance != null) { %>
                <h5>战斗数据</h5>
                <div class="data-list">
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.grade}}</p>
                        <p>段位</p>
                    </data-card>
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.mmr}}</p>
                        <p>分数</p>
                    </data-card>
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.mvp_count}}</p>
                        <p>MVP次数</p>
                    </data-card>
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.total_count}}</p>
                        <p>总场数</p>
                    </data-card>
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.win_count}}</p>
                        <p>胜场数</p>
                    </data-card>
                    <data-card>
                        <p>&nbsp;</p>
                        <p>{{data.performance[mode].performance.ranking}}</p>
                        <p>周排名</p>
                    </data-card>
                </div>
                <% for(let xfid in data.performance[mode].metrics) { if(data.performance[mode].metrics[xfid].items != null) {%>
                <p class="xf">心法：{{data.performance[mode].metrics[xfid].kungfu}}</p>
                <div class="data-list">
                    <% for(let item in data.performance[mode].metrics[xfid].items) { %>
                        <data-card>
                            <p>&nbsp;{{data.performance[mode].metrics[xfid].items[item].grade}}</p>
                            <p>
                                {{if data.performance[mode].metrics[xfid].items[item].name.substr(data.performance[mode].metrics[xfid].items[item].name.length - 1, 1) == '率'}}
                                    {{(data.performance[mode].metrics[xfid].items[item].value * 100).toFixed(2)}}%
                                {{else}}
                                    {{data.performance[mode].metrics[xfid].items[item].value.toFixed(2)}}
                                {{/if}}
                            </p>
                            <p>{{data.performance[mode].metrics[xfid].items[item].name}}</p>
                        </data-card>
                    <% } %>
                </div>
                <% }} %>
                <h5>常用技能</h5>
                <% for(let xfid in data.skills[key]) { %>
                <p class="xf">心法：{{xfid}}</p>
                    <div class="skill-list">
                        <% for(let item in data.skills[key][xfid]) {%>
                        <skill-card>
                            <div>
                                <img src="{{data.skills[key][xfid][item].icon}}">
                            </div>
                            <div>
                                <p class="skill-name">{{data.skills[key][xfid][item].name}}</p>
                                <p class="skill-times">{{data.skills[key][xfid][item].times}}次{{if data.skills[key][xfid][item].success_times != 0}}/{{data.skills[key][xfid][item].success_times}}有效{{/if}}</p>
                            </div>
                        </skill-card>
                        <% } %>
                    </div>
                <% } %>
            <% } %>
        <% } %>
    </div>
    
    <p class="tips">
        数据获取时间：{{data.time}}
    </p>
    <p class="tips">
        数据来源不一定准确，仅供参考
    </p>
    本机器人是开源免费的机器人，有需要请加群<span class="b">116523057</span>获取
</div>
